<script setup>
    import { onMounted } from 'vue'
    import { getIrrigationDetail } from '@/api/irrigate'
    import positionIcon from '../../../assets/images/equipment_1.png'

    const props = defineProps({
        positionList: {
            type: Array,
            default: []
        }
    })

    const emit = defineEmits(['showList'])

    let positionList = props.positionList

    // 查看机井详情
    let dialogVisible = $ref(false)

    let dialogInfo = $ref({})

    // 详情加载中
    let detailLoading = $ref(false)
    
    // 灌溉详情
    let irrigateDetail = $ref({})

    // 创建Map实例
    let map = undefined

    // 定时器
    let timer = undefined

    onMounted(() => {
        
        let arr = positionList.map((item) => {
            return [item.lat, item.lng]
        })

        map = new BMapGL.Map("container");            
        map.enableScrollWheelZoom();                           //启用滚轮放大缩小  

        var point = new BMapGL.Point(...arr[0]);    // 创建点坐标
        map.centerAndZoom(point,15);                     // 初始化地图,设置中心点坐标和地图级别。

        var myIcon = new BMapGL.Icon(positionIcon, new BMapGL.Size(63, 81));
        

        for(let i = 0; i < arr.length; i++){
            // 创建Marker标注，使用图标
            var pt = new BMapGL.Point(arr[i][0], arr[i][1]);
            var marker = new BMapGL.Marker(pt, {
                icon: myIcon
            });
            // 创建文本标注对象
            var labelopts = {
                position: pt, // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(0, -80), // 设置文本偏移量
            };
            var label = new BMapGL.Label(positionList[i].pumpName, labelopts);
            label.setStyle({ 
                color : "#fff", 
                fontSize : "16px", 
                backgroundColor:"rgba(0,0,0,0.6)",
                border :"2px", 
                fontWeight :"bold",
                padding: '5px 10px',
                transform: 'translateX(-50%)',
                cursor: 'pointer'
            });
            map.addOverlay(label);
            map.addOverlay(marker)
    
            // 鼠标放在坐标上 500ms 显示详情
            marker.addEventListener('mouseover', function (e) {
                var p = e.target;
                clearTimeout(timer)
                timer = setTimeout(() => {
                    dialogInfo = {
                        top: e.screenY,
                        left: e.screenX
                    }
                    dialogVisible = true
                    getDetail(positionList[i].id)
                }, 500);
            });

            // 鼠标移开 关闭详情
            marker.addEventListener('mouseout', function (e) {
                dialogVisible = false
                clearTimeout(timer)
            });

            // 鼠标点击坐标
            marker.addEventListener('click', function (e) {
                console.log(positionList[i])
                emit('showList', positionList[i].pumpName)
            });
        }
    })

    // 点击区域村 设置该村区域地图中心点
    const setMapCenterPoint = (name) => {

        let data = positionList.filter((item) => {
            return item.districtName == name
        })

        // 创建点坐标
        var point = new BMapGL.Point(data[0].lat, data[0].lng);    

        // 初始化地图,设置中心点坐标和地图级别。
        map.centerAndZoom(point, 19);                     
    }

    // 查询灌溉详情
    const getDetail = (id) => {
        dialogVisible = true
        detailLoading = true
        getIrrigationDetail({ id }).then(res => {
            detailLoading = false
            if(res.success){
                irrigateDetail = res.result
            }
        })
    }

     // 地图类型
    let mapType = [{ name: '地图', code: BMAP_NORMAL_MAP }, { name: '卫星', code: BMAP_SATELLITE_MAP }]
    let currentMapType = $ref('地图')
    const handleClickMapType = ({ name, code }) => {
        currentMapType = name
        map.setMapType(code);
    }

    defineExpose({
        setMapCenterPoint
    })

</script>

<template>
    <div class="agriculture-map-wrap">
        <div id="container"></div>

        <div 
            v-if="dialogVisible"
            class="irrigateInfo"
            :style="{
                top: dialogInfo.top + 'px',
                left: dialogInfo.left + 'px'
            }"
        >
            <ul v-loading="detailLoading">
                <li>
                    <label>机井名称：</label>
                    <span>{{ irrigateDetail.pumpName }}</span>
                </li>
                <li>
                    <label>村名称：</label>
                    <span>{{ irrigateDetail.districtName }}</span>
                </li>
                <li>
                    <label>经度：</label>
                    <span>{{ irrigateDetail.lat }}</span>
                </li>
                <li>
                    <label>纬度：</label>
                    <span>{{ irrigateDetail.lng }}</span>
                </li>
                <li>
                    <label>安装时间：</label>
                    <span>{{ irrigateDetail.installTime }}</span>
                </li>
                <li>
                    <label>安装位置：</label>
                    <span>{{ irrigateDetail.installPosition }}</span>
                </li>
            </ul>
        </div>

        <div class="map-tabbar flex-center">
            <div
                v-for="(item, index) in mapType"
                :key="index"
                class="tabbar-item"
                :class="{ active: currentMapType == item.name }"
                @click="handleClickMapType(item)"
            >
                {{ item.name }}
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
    .agriculture-map-wrap{
        width: 100%;
        height: 100%;
        // background: #fff;

        #container{
            width: 100%;
            height: 100%;
        }
    }
    
    .irrigateInfo{
        background: #fff;
        position: absolute;
        padding: 20px;
        top: 0;
        left: 0p;
        z-index: 999;
        
        li{
            line-height: 30px;
            padding: 10px 0;
            display: flex;

            label{
                width: 110px;
                color: #666;
            }

            span{
                color: #333;
                font-weight: bold;
            }
        }
    }
</style>

<style>
    .map-info{
        width: 354px;
    }

    .el-dialog{
        display: flex;
        flex-direction: column;
        margin:0 !important;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
    }

    .el-dialog .el-dialog__body{
        flex:1;
        overflow: auto;
    }
</style>